<template>
  <view class="gas-station-container">
    <!-- 加油站信息列表 -->
    <view class="info-list">
      <text class="info-title">{{ stationInfo.name }}</text>
      
      <view class="info-item">
        <text class="info-label">ID：</text>
        <text class="info-value">{{ stationInfo.id }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">品牌：</text>
        <text class="info-value">{{ stationInfo.orgInfo.branch }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">省市：</text>
        <text class="info-value">{{ stationInfo.province }} {{ stationInfo.city }} {{ stationInfo.country }}</text>
      </view>
      
      <view class="info-item">
        <text class="info-label">详细地址：</text>
        <text class="info-value">{{ stationInfo.address }}</text>
      </view>
    </view>

    <!-- 站长显示修改按钮 -->
   <view class="button-section" v-if="userInfo?.member?.role === MEMBER_ROLES.DIRECTOR" @click="handleEdit">
      <button class="gvr-yellow-button edit-btn">修改公司信息</button>
    </view>

    <!-- 员工显示加入状态 -->
   <view class="join" v-else>
		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.VERIFYING">
		  <image class="status-icon" src="/static/my/review-under.png" mode="aspectFit"></image>
		  <text class="status-text">审核中</text>
		</view>
		
		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.ENABLED">
		  <image class="status-icon" src="/static/my/review-success.png" mode="aspectFit"></image>
		  <text class="status-text">已通过</text>
		</view>
		
		<view class="join-status" v-if="userInfo?.member.status === EXAMINE_STATUS.REFUSED">
		  <image class="status-icon" src="/static/my/review-rejected.png" mode="aspectFit"></image>
		  <text class="status-text">已驳回</text>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userStore } from '@/utils/userStore.js'
import { orgApi,MEMBER_ROLES,EXAMINE_STATUS} from '@/service/api.js' // 假设这是获取组织详情的API
import { RouterMethods } from '../../utils/router'
const stationInfo = ref({})

const userInfo = ref(null)

// 获取加油站详情
const fetchStationInfo = async () => {
  try {
    userInfo.value = userStore.getUserInfo() // 获取用户信息
    if (userInfo.value.member.orgId != undefined) {
      const response = await orgApi.getOrgDetail(userInfo.value.member.orgId)
      if (response.code == undefined) {
        stationInfo.value = response
      } else {
		 throw new Error(response.msg || '获取加油站信息失败')
	  }
    }
  } catch (error) {
    console.error('获取加油站信息失败:', error)
    uni.showToast({
      title: '获取加油站信息失败',
      icon: 'none'
    })
  }
}

// 处理编辑按钮点击
const handleEdit = () => {
  const encodedData = encodeURIComponent(JSON.stringify(stationInfo.value))
  RouterMethods.toGasCreateOrg('edit',encodedData)
}

onMounted(() => {
  fetchStationInfo()
})
</script>

<style>
.gas-station-container {
  min-height: 100vh;
  /* padding: 0 56rpx; */
  padding-left: 56rpx;
  padding-right: 56rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.info-list {
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
}
.info-title {
  margin-top: 56rpx;
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  width: 100%;
}

.info-item {
  padding-top: 41rpx;
  border-bottom: 2rpx solid #001E32;
  padding-bottom: 13rpx;
}

.info-label {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.info-value {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

/* 底部按钮区域样式修改 */
.button-section {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #FFFFFF;
  z-index: 20
}

.edit-btn {
  border-radius: 0;
}

/* 加入状态样式 */
.join-status {
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  height: 60rpx;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 6rpx;
}

.status-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}
</style>